<template>
    <view>
        <image :mode="mode" :src="img_src" :style="{width: '100%', height: '100%',display:'block'}" @error="imageError"
            @click="imgClick" />
    </view>
</template>

<script>
export default {
    props: {
        src: {
            type: String,
            default: '',
        },
        mode: {
            type: String,
            default: 'aspectFill',
        }
        // 缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
        // 缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
        // 缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
        // 缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
        // 缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3 + 支持、微信小程序需要基础库 2.10.3
    },
    data() {
        return {
            img_src: ''
        };
    },
    watch: {
        src: {
            handler() {
                this.img_src = this.src
            },
            immediate: true,
            deep: true
        },
    },
    methods: {
        imageError() {
            // this.img_src = '../../static/common/img_err.png';
            this.img_src = '../../static/logo_small.png';
        },
        imgClick() {
            this.$emit('click');
        }
    },
};
</script>

<style lang="scss" scoped></style>
